<template>
  <searchArea :fieldlist="searchList" @search="search" @reset="search" />
  <q-table
    :grid="grid"
    :rows="data"
    :columns="columns"
    row-key="id"
    v-model:pagination="pagination"
    :loading="loading"
    :filter="filter"
    :rows-per-page-options="[25, 50, 100, 0]"
    @request="onRequest"
    binary-state-sort
    :visible-columns="visibleColumns"
    :style="$q.screen.xs ? '' : 'max-height: calc(100vh - 100px)'"
    class="my-sticky-virtscroll-table"
  >
    <template v-slot:top>
      <div class="q-table__title q-mr-md">{{ modelLabel }}</div>
      <q-select
        label="选择显示列"
        v-model="visibleColumns"
        multiple
        borderless
        dense
        options-dense
        :display-value="visibleColumns.length + '/' + columns.length + '列'"
        emit-value
        map-options
        :options="columns"
        option-value="name"
        :style="{'min-width': $q.screen.xs ? '100px' : '150px'}"
      />
      <q-btn :icon="grid ? 'table_view' : 'grid_view'" dense @click="grid = !grid" />
      <q-space />
      <q-btn label="新增" color="primary" icon="add" :dense="$q.screen.xs" @click="goDetail(-1)" v-if="canAdd">
        <q-tooltip>新增{{ modelLabel }}</q-tooltip>
      </q-btn>
    </template>

    <template v-slot:body-cell-operate="props">
      <q-td :props="props">
        <q-btn color="secondary" label="查看" dense @click="goDetail(props.row.id)">
          <q-tooltip>查看{{ modelLabe }}</q-tooltip>
        </q-btn>
        <!-- <q-btn color="grey" flat label="删除" dense @click="deleteDetail(props.row.id)" v-if="canEdit|| props.row._owner">
          <q-tooltip>删除{{ modelLabel }}</q-tooltip>
        </q-btn> -->
      </q-td>
    </template>

    <template v-slot:item="props">
      <q-list dense class="fit shadow-1 q-mb-md q-py-md">
        <q-item v-for="col in props.cols.filter(col => !col.delay || props.row._hidden)" :key="col.name">
          <q-item-section class="text-grey-8">
            <q-item-label>{{ col.label }}</q-item-label>
          </q-item-section>
          <q-item-section>
            <div v-if="col.name === 'operate'">
              <q-btn color="secondary" :label="canEdit || props.row._owner ? '修改' : '查看'" @click="goDetail(props.row.id)"  v-if="canEdit|| props.row._owner" />
              <!-- <q-btn color="grey" label="删除" @click="deleteDetail(props.row.id)"  v-if="canEdit|| props.row._owner" /> -->
            </div>
            <q-item-label v-else>{{ col.value }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item>
          <q-btn
            class="full-width"
            dense
            style="padding: 0;"
            :label="props.row._hidden ? '隐藏' : '更多'"
            :icon="props.row._hidden ? 'arrow_drop_up' : 'arrow_drop_down'"
            outline
            color="grey"
            @click="props.row._hidden = !props.row._hidden"
          />
        </q-item>
      </q-list>
    </template>
  </q-table>
</template>

<script>
import { defineComponent } from 'vue';
import searchArea from 'src/components/SearchArea.vue';
import { listPageMix } from 'src/lib/mixin.js';
import pageConfig from 'app/search/manager/tenant/list.js';
import dialogForm from 'src/components/DialogInputForm.vue';
import { useMeta } from 'quasar';
import { useStore } from 'stores/store';

export default defineComponent({
  name: 'paymentList',
  setup (props, context) {
    const $store = useStore();
    const modelLabel = '缴费记录';
    const moduleName = 'payment';
    const submoduleName = 'list';
    const listApi = `/c2/manager/${moduleName}/list`; // 数据列表接口
    const deleteApi = `/c2/manager/${moduleName}/destroy`; // 删除接口

    useMeta({
      // 设置文件标题
      title: `${modelLabel}列表 - ${$store.siteConfig.appName} - 木多鱼系列`
    });

    return {
      modelLabel,
      moduleName,
      submoduleName,
      listApi,
      deleteApi
    }
  },
  components: {
    searchArea,
    dialogForm
  },
  mixins: [listPageMix],
  data () {
    return {
      columns: [
        { name: 'operate', label: '操作', align: 'center' },
        { name: 'tenant_name', label: '组织名称', field: 'tenant_name', sortable: true, align: 'center' },
        { name: 'payment_method', label: '支付方式', field: 'payment_method', sortable: true, format: val => val && this.dictObj.payMethod && this.dictObj.payMethod[val] && this.dictObj.payMethod[val].label, align: 'center' },
        { name: 'payment_num', label: '支付流水号', field: 'payment_num', sortable: true, align: 'center' },
        { name: 'payment_content', label: '支付内容', field: 'payment_content', sortable: true, align: 'center' },
        { name: 'payment_money', label: '支付金额', field: 'payment_money', sortable: true, align: 'center' },
        { name: 'start_date', label: '有效期开始', field: 'start_date', sortable: true, align: 'center' },
        { name: 'expire_date', label: '有效期结束', field: 'expire_date', sortable: true, align: 'center' },
        { name: 'create_date', label: '创建日期', field: 'create_date', align: 'center', delay: true },
        { name: 'create_user_name', label: '创建人', field: 'create_user_name', sortable: true, align: 'center', delay: true },
        { name: 'modify_date', label: '修改日期', field: 'modify_date', align: 'center', delay: true },
        { name: 'modify_user_name', label: '修改人', field: 'modify_user_name', sortable: true, align: 'center', delay: true }
      ]
    }
  },
  created () {
    this.assembly(pageConfig.search); // 根据配置生成搜索条件
  },
  mounted () {
  },
  methods: {
  },
  computed: {
    canAdd () {
      return this.rights[this.moduleName] && this.rights[this.moduleName].add;
    },
    canEdit () {
      return this.rights[this.moduleName] && this.rights[this.moduleName].edit;
    }
  },
  watch: {
  }
});
</script>
